<template>
  <div class="side">
    <h3>相关推荐</h3>
    <div class="list">
      <nuxt-link v-for="item in recommendData" :key="item.id" :to="'/raider/detail?id='+item.id">
        <div class="cover">
          <img v-if="item.images[0]" :src="item.images[0]" alt />
          <img v-else src="@/assets/no.png" alt />
        </div>
        <div class="content">
          <h4>{{item.title}}</h4>
          <p>{{item.time}} 阅读 {{item.watch}}</p>
        </div>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      recommendData: [],
    };
  },
  created() {
    this.getData();
  },
  computed: {
    time() {
      return moment(this.recommendData.created_at).format("YYYY-MM-DD HH:mm");
    },
  },
  methods: {
    getData() {
      this.$axios({
        url: "/posts/recommend",
      }).then((res) => {
        this.recommendData = res.data.data.map((item) => {
          item.time = moment(item.created_at).format("YYYY-MM-DD HH:mm");
          return item;
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.side {
  width: 280px;
  h3 {
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .list {
    a {
      padding: 20px 0;
      display: flex;
      border-bottom: 1px solid #ddd;
      .cover {
        margin-right: 10px;
        img {
          width: 100px;
          height: 80px;
          display: block;
        }
      }
      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h4 {
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        p {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>